[CSS] :not 선택자 사용방법

CSS의 스타일을 적용할때 어떤 요소에 적용할 것인지 결정하는 방법으로 선택자를 사용합니다. 아래는 의사선택자 중 하나인 :not() 선택자의 기능과 사용방법에 대하여 알아보겠습니다.

# :not 선택자 알아보기

css의  :not 선택자는 이미 지정된 css 스타일에서 특정한 요소를 제외시킬 경우 사용합니다. 일반적으로 선택자는 선택을 하지 않기위해 사용하지만 이 경우는 선택을 하지 않기 위해서 사용합니다. 이 선택자를 알아두면 실제 활용할 부분이 매우 많기 때문에 굉장히 유용합니다. 아래는 가장 기본적인 문법 및 사용방법입니다.

선택할 요소:not(제외시킬 요소) { ... }

보시는 것과 같이 소괄호안에 원하는 태그를 넣어주면 됩니다. 아래는 간단한 사용 예제입니다.


# :not()선택자 예제 소스 보기 예제를 사용하여 자세히 알아봅니다. 아래 예제는 disabled 클래스명을 가지고 있는 경우 폰트를 회색으로 변경하는 코드 예제입니다.
@ not.html

@ not.css

위 예제를 수행하면 disabled 속성을 가지지 않는 모든 태그는 텍스트에 블루 색상이 적용되게 합니다. 매우 간단하죠? 그렇다면 해당 속성이 자주 사용되는 경우는 언제가 있을까요?

예를들어 많은 버튼들이 있는데 그 중 한, 두 개만 비활성화된 경우... 즉, 클릭이 불가능한 경우에 시각적으로 보여주기 위해서 파란색이 아닌 다른 색상을 적용할 수 있을 것입니다. 이 경우 제외 선택자 :not()이 매우 유용하게 쓰일 수 있겠죠. 한가지 더!! 주의할 점으로 소괄호 () 안에는 따옴표 표기를 하지 않습니다.


# :not()을 사용해 클래스가 아닌 속성만 제외하는 경우 위 예제는 클래스 속성에 적용한 예제이나 클래스 속성 말고도 다른 속성(href 등등)에 사용도 가능합니다. 예를 들어 href 속성이 없는 경우 폰트 색을 회색으로 변경한다면 아래와 같을 것입니다.

아래는 css 파일 코드입니다.

여기까지 CSS의 :not 선택자를 사용하는 몇 가지 예제를 알아보았습니다. 선택자를 사용하여 반대되는 케이스에 스타일을 적용할 때 이 방법을 사용하면 매우 편리하게 적용할 수 있습니다.